<!--
  ~ Copyright(c) 2016-2017 IBM, Red Hat, and others.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="container p-a-1" style="background: white">
    <div *ngIf="speaker">

        <div class="row">

            <div class="col-xs">
                <div class="row">
                    <div class="col-xs p-a-1 m-x-1" style="font-family:HelveticaNeue-Light;font-size:26px;color:#00aa5e;letter-spacing:0;line-height:33px;text-align:left">
                        <h4>
                            {{speaker.nameFirst}} {{speaker.nameLast}}
                            <small class="text-muted">&nbsp;{{speaker.twitterHandle}}</small>
                        </h4>
                    </div>
                </div>
                <div class="row p-a-1">
                    <div class="col-xs-4" style="font-family:HelveticaNeue;font-size:14px;color:#6f7878;letter-spacing:0;line-height:22px;text-align:center;">
                        <img src="{{speaker.picture}}" class="img-circle"
                             alt="{{speaker.nameFirst}} {{speaker.nameLast}}" width="200" height="200"><br />
                             <small class="text-muted">&nbsp;{{speaker.twitterHandle}}</small><br />
                             {{speaker.organization}}
                    </div>
                    <div class="col-xs-8 p-y-1">
                        <textarea class="form-control" id="bio" rows="9" style="background: white;"
                                  readonly>{{speaker.biography}}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <sessions [speaker]="speaker"></sessions>

    </div>
</div>
